<!--
 * @Date: 2020-03-20 14:55:02
 * @LastEditors: peng qiao
 * @LastEditTime: 2020-03-25 15:57:18
 -->
<template>
  <div class="register">
    <van-nav-bar left-arrow title="注册" @click-left="$router.go(-1)" fixed style="position: relative;" />
    <div class="edit-content-style">
      <van-cell-group class="login-input-style">
        <van-field v-model="registerForm.idcardNo" maxlength="18" clearable placeholder="请输入身份证号" label="身份证号" />
        <van-field v-model="registerForm.phone" type="tel" clearable placeholder="请输入手机号" label="手机号" />
        <van-field v-model="registerForm.phoneCode" type="number" clearable placeholder="请输入验证码" label="验证码">
          <van-button slot="button" size="small" color="#DC4630" plain round @click="getVerificationCode"
            :disabled="codeDisabled">{{ buttonText }}</van-button>
        </van-field>
        <van-field v-model="password" type="password" maxlength="12" clearable placeholder="请输入密码(6--12位)"
          label="密码" />
        <van-field v-model="passwordAgain" type="password" maxlength="12" clearable placeholder="请再次输入密码(6--12位)"
          label="确认密码" />
      </van-cell-group>
      <p class="edit-tip-style">密码由6-12位数字及字母组成，字母区分大小写</p>
      <van-button class="register-btn" @click="register" size="large" type="primary" color="#DC4630" round
        :disabled="isDisabled">注 册
      </van-button>
    </div>
  </div>
</template>

<script>
  import api from "@/controller/Interface.js";
  import util from "@/controller/Common/util.js";
  import md5 from "js-md5";
  import constant from "@/controller/constant.js";
  export default {
    name: 'register',
    data() {
      return {
        registerForm: {
          phone: '',
          phoneCode: '',
          idcardNo: ''
        },
        password: '',
        passwordAgain: '',
        buttonText: "获取验证码",
        codeDisabled: false,
        time: 60,
      }
    },
    computed: {
      isDisabled() {
        return (
          // this.registerForm.phone === "" ||
          // this.registerForm.phoneCode === '' ||
          this.registerForm.idcardNo === "" ||
          this.password.length < 6 ||
          this.passwordAgain.length < 6
        );
      }
    },
    methods: {
      //发送手机验证码倒计时
      timer() {
        if (this.time > 0) {
          this.codeDisabled = true;
          this.time--;
          this.buttonText = this.time + "秒";
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.buttonText = "获取验证码";
          this.codeDisabled = false;
        }
      },
      getVerificationCode() {
        if (!util.validatePhoneNum(this.registerForm.phone)) {
          this.$toast("请输入合法手机号");
          return;
        }
        this.time = 60;
        this.timer();
        api
          .user_v1_msg_code(this.registerForm.phone)
          .then(res => {
            if (res.code === "0") {
              this.$toast('验证码发送成功！');
            } else {
              if (res && res.msg) {
                this.$toast(res.msg);
              } else {
                this.$toast(constant.unusualMsg);
              }
              this.time = 0;
              this.buttonText = "获取验证码";
              this.codeDisabled = false;
            }
          })
          .catch(() => {
            this.$toast(constant.netErrMsg);
            this.time = 0;
            this.buttonText = "获取验证码";
            this.codeDisabled = false;
          });
      },
      register() {
        console.log(this.registerForm)
        if (this.registerForm.phone != '') {
          if (!util.validatePhoneNum(this.registerForm.phone)) {
            this.$toast("请输入合法手机号");
            return;
          }
        }
        if (this.password !== this.passwordAgain) {
          this.$toast("两次输入的密码不一致");
          return;
        }
        if (!util.validateIdCardNumber(this.registerForm.idcardNo)) {
          this.$toast("身份证号不合法");
          return;
        }
        const data = {
          phone: this.registerForm.phone,
          phoneCode: this.registerForm.phoneCode,
          idcardNo: this.registerForm.idcardNo,
          password: md5(this.password)
        }
        api.security_v1_register(data).then(res => {
          if (res.code === "0") {
            this.$toast("注册成功，请登录!");
            localStorage.setItem("idcardNo", this.registerForm.idcardNo + "");
            localStorage.setItem("username", this.registerForm.phone + "");
            this.$router.go(-1);
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        }).catch(() => {
          this.$toast(constant.netErrMsg);
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .register {
    .edit-content-style {
      width: 100%;
      height: 365px;
      border-radius: 10px;
      background: #ffffff;

      .edit-tip-style {
        font-size: 12px;
        color: #999;
        padding-left: 16px;
        margin-bottom: 48.5px;
      }

      .register-btn {
        width: 90%;
        margin: 0 5%;
      }
    }
  }
</style>